<template>
  <div style="max-width: 600px">
    <el-steps
      style="max-width: 600px"
      :active="active"
      finish-status="success"
      align-center
    >
      <el-step v-for="step in steps" :title="step.title" />
    </el-steps>
    <div v-if="active === 0" class="mt">
      <slot name="step1"></slot>
    </div>
    <div v-if="active === 1" class="mt">
      <slot name="step2"></slot>
    </div>
    <div v-if="active === 2" class="mt">
      <slot name="step3"></slot>
    </div>
    <div class="step-buttons mt">
      <el-button v-if="active > 0" @click="active--">上一步</el-button>
      <el-button @click="nextStep">
        {{ active === steps.length - 1 ? '提交' : '下一步' }}
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps<{
  steps: { title: string }[];
  formRef1: any;
  formRef2: any;
  formRef3: any;
}>();
const emit = defineEmits(['submit']);
console.log('👿 ~ emit:', emit);

const active = ref(0);
const nextStep = () => {
  const forms = [props.formRef1, props.formRef2, props.formRef3];
  // 要写在方法里面,不然拿不到值

  const currentForm = forms[active.value];
  currentForm.validate((valid: boolean) => {
    if (valid) {
      if (active.value === forms.length - 1) {
        emit('submit');
      } else {
        active.value++;
      }
    }
  });
};
</script>
